<template>
  <div class="use-case-metrics-container">
    <div class="header">
      <h2>用例图度量</h2>
      <p>用于分析软件系统的用例图复杂度</p>
    </div>
    <div class="content">
      
      <!-- 图片数据卡片 -->
      <div class="result-section" v-if="designData">
        <el-card class="result-card">
          <div slot="header">
            <span>图片分析结果</span>
          </div>
          <div class="input-group">
            <div class="input-field">
              <div class="input-row">
                <label for="tcf-input">TCF系数：</label>
                <input type="text" id="tcf-input" name="tcf" v-model="this.tcf" placeholder="1.02">
              </div>
            </div>
            
            <div class="input-field">
              <div class="input-row">
                <label for="ef-input">环境因子(EF)：</label>
                <input type="text" id="ef-input" name="ef" v-model="this.ef" placeholder="0.99">
              </div>
            </div>
            <el-button @click="getUCP" >计算</el-button>
          </div>
          <div class="result-content">
            <el-table :data="[designData]"  style="width: 100%" :default-sort="{prop: 'wmc', order: 'descending'}">
              <el-table-column prop="actors" label="参与者数" sortable></el-table-column>
              <el-table-column prop="useCases" label="用例数" sortable></el-table-column>
              <el-table-column prop="uaw" label="UAW" sortable></el-table-column>
              <el-table-column prop="uuc" label="UUC" sortable></el-table-column>
            </el-table>
            <div class="total-points">
              <h3>用例点(UCP):{{ this.ucp }}</h3>
            </div>
            <div class="chart-container">
              <div ref="barChart" style="width: 100%; height: 400px;"></div>
            </div>
          </div>
        </el-card>
        
      </div>

      <!-- 当没有数据时显示提示 -->
      <div v-if="!designData" class="no-data">
        <el-card class="result-card">
          <div class="no-data-content">
            <i class="fas fa-file-upload"></i>
            <h3>暂无数据</h3>
            <p>请先上传图片文件以进行分析</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>

import * as echarts from 'echarts'

export default {
  name: 'UseCaseMetricsView',
  data() {
    return {
      chart: null,
      ucp: 0,
      tcf: 1.02,
      ef: 0.99
    }
  },
  computed: {
    designData() {
      return this.$store.getters.getDesignData;
    },
    designResultData() {
      if (!this.designData || !this.designData.topFiles) return [];
      return this.designData.topFiles;
    }
  },
  methods: {
    getUCP(){
      let uucp = this.designData.uaw + this.designData.uuc;
      this.ucp = Math.round(uucp * this.tcf * this.ef);
    },
    initChart() {
      if (!this.designData) return;
      
      const chartDom = this.$refs.barChart;
      this.chart = echarts.init(chartDom);
      this.updateChart();
      
      // 响应式调整图表大小
      window.addEventListener('resize', () => {
        this.chart.resize();
      });

      let uucp = this.designData.uaw + this.designData.uuc;
      this.ucp = Math.round(uucp * this.tcf * this.ef);
    },

    updateChart() {
      console.log("1designData:")
      console.log(this.designData)
      if (!this.designData || !this.chart) return;
      
      const option = {
        title: {
          text: '用例图度量指标',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['指标值'],
          top: 40
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['参与者数', '用例数', 'uaw', 'uuc'],
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          name: '数值'
        },
        series: [
          {
            name: '指标值',
            type: 'bar',
            data: [
              this.designData.actors,
              this.designData.useCases,
              this.designData.uaw,
              this.designData.uuc
            ],
            itemStyle: {
              color:'#409EFF'
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            },
          }
        ]
      };
      
      this.chart.setOption(option);
    }
  },
  mounted() {
      this.initChart();
      console.log(this.designData)
  },
  watch: {
    sourceCodeResultData: {
      handler() {
        this.$nextTick(() => {
          this.initChart();
        });
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
}
</script>

<style scoped>
.use-case-metrics-container {
  padding: 20px;
  height: 100%;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.header {
  margin-bottom: 30px;
}

.header h2 {
  color: #333333;
  margin-bottom: 10px;
}

.header p {
  color: #606266;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.result-section {
  margin-top: 20px;
  width: 100%;
}

.result-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  width: 100%;
}

.total-points {
  margin-top: 20px;
  text-align: right;
  padding: 10px;
  padding-right: 50px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.total-points h3 {
  color: #409eff;
  margin: 0;
}

.chart-container {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.no-data {
  margin-top: 20px;
}

.no-data-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.no-data-content i {
  font-size: 48px;
  color: #909399;
  margin-bottom: 20px;
}

.no-data-content h3 {
  color: #606266;
  margin-bottom: 10px;
  font-size: 18px;
}

.no-data-content p {
  color: #909399;
  font-size: 14px;
}
.input-group {
    display: flex;
    gap: 15px;
    max-width: 500px;
    padding: 10px;
    border-radius: 5px;
  }
  
  .input-field {
    display: flex;
    flex-direction: column;
  }

  .input-row {
    display: flex;
    align-items: center;
  }
  
  .input-field label {
    font-weight: bold;
    color: #333;
    white-space: nowrap;
  }
  
  .input-field input {
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 80px;
  }
</style> 